<template>
    <el-form :model="user" :rules="rules">
        <el-form-item label="手机号" prop="phone" :rules="phoneRules">
            <div class="div-input">
                <el-input v-model="user.phone" placeholder="phone"/>
            </div>
        </el-form-item>
        <div class="div-input">
            <button ref="sendBtn" @click="disabledButton" :disabled="disabled || countdown > 0">
                {{ countdown > 0 ? `重新操作 (${countdown})` : '发送验证码' }}
            </button>
        </div>
        <el-form-item label="验证码">
            <div class="div-input">
                <el-input v-model="user.captcha" placeholder="password"/>
            </div>
        </el-form-item>
    </el-form>
    <button ref="Btn" @click="login" style="height:30px;width: 80px">登录</button>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import axios from "axios";
import qs from "qs";
import router from "@/router";
import {ElMessage} from "element-plus";

const sendBtn = ref(null);
const disabled = ref(false);
const countdown = ref(0);
const Btn = ref(null);

const user = ref({phone: '', captcha: ''})

const rules = {
    phone: [
        { required: true, message: "手机号不能为空", trigger: "blur" },
        { pattern: /^\d{11}$/, message: "手机号必须是11位数字", trigger: "blur" },
    ],
};

const phoneRules = ref(rules.phone);

onMounted(() => {
    sendBtn.value = document.querySelector("[ref='sendBtn']");
    // 在页面加载时重新启动倒计时
    if (localStorage.getItem("countdown") > 0) {
        startCountdown();
    }
});

const startCountdown = () => {
    disabled.value = true;
    countdown.value = localStorage.getItem("countdown") || 60;
    const intervalObj = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
            disabled.value = false;
            clearInterval(intervalObj);
        }
    }, 100);
};

//发送验证码
const disabledButton = () => {
    disabled.value = true;
    countdown.value = 5;
    let data = qs.stringify({phone: user.value.phone});
    axios.post('http://124.71.182.39:27000/passport/phone/captcha', data)
        .then((response) => {
            if (response.data.state === 20000) {
                ElMessage.success('操作成功')
            } else {
                ElMessage.error(response.data.message)
            }
        })
    const intervalObj = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
            disabled.value = false;
            clearInterval(intervalObj);
        }
    }, 100);

    // startCountdown();
};

watch(countdown, (newValue) => {
    if (newValue > 0 && sendBtn.value) {
        sendBtn.value.innerText = `重新操作 (${newValue})`;
    } else if (sendBtn.value) {
        sendBtn.value.innerText = "发送验证码";
    }
    // 将禁用时间保存到本地存储
    localStorage.setItem("countdown", String(newValue));
});
const login = () => {
    let data = qs.stringify(user.value);
    // 禁用登录按钮或显示加载状态
    disableButton();
    axios.post('http://124.71.182.39:27000/passport/login/phone', data)
        .then((response) => {
            if (response.data.state == 20000) {
                router.push('/');
                ElMessage.success('登录成功'); // 弹出成功提示信息
            } else {
                ElMessage.error(response.data.message); // 弹出错误提示信息
            }
        })
        .catch((error) => {
            console.error(error);
        })
        .finally(() => {
            // 恢复登录按钮状态
            enableButton();
        });
}
const disableButton = () => {
    // 禁用登录按钮的逻辑
    Btn.value.setAttribute('disabled', 'disabled');
};

const enableButton = () => {
    // 恢复登录按钮的逻辑
    Btn.value.removeAttribute('disabled');
};
</script>

<style scoped>

</style>